<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>层级选择器</title>
		<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
		<style type="text/css">
			div{
				background-color: #f00;
				margin:5px;
				border: 2px solid ;
			}
		</style>
	</head>
	<body>
		<div id="div1">
			div-1
			<div class="cls1">div-1.1</div>
			<div>div-1.2</div>
			<div>
				div-1.3
				<div class="cls1">div-1.3.1</div>
				<div>div-1.3.2</div>
				<div>div-1.3.3</div>
			</div>
		</div>
		
		<div id="div2">
			div-2
			<div class="cls1">div-2.1</div>
			<div>div-2.2</div>
			<div>
				div-2.3
				<div class="cls1">div-2.3.1</div>
				<div>div-2.3.2</div>
				<div>div-2.3.3</div>
			</div>
		</div>
		
		<script type="text/javascript">
			//层级选择器
			// 1) 空格分隔符,存在的某个祖先的 >>后代节点<<
			// $('.cls1').css('background-color','#0f0');	
			// $('#div1 .cls1').css('background-color','#0f0');
			
			// 2) >大于号分隔,存在某个父亲的 >>儿子节点<<
			// 通常用于再重复的结构中,提取对应位置的某些元素
			// $('#div1>.cls1').css('background-color','#0f0');

			// $('#div1>div>.cls1').css('background-color','#0f0');
			
			// 3) +加号分割: 存在某个邻接的兄长节点的 >>兄弟节点<< 与第一个例子作比较
			// 通常用于再重复的结构中,提取对应位置的某些元素
			// $('.cls1+div').css('background-color','#0f0');
			
			// *只有jQuery支持----->>> 4) ~波浪线分隔: 存在某个同辈年长节点的 >>兄弟节点<<
			// 通常用于表头和后续同级单元的处理
			// $('#div1~div').css('background-color','#0f0');
			
			// 要了解哪些是css支持,哪些是jQuery支持的!!
			
			
			
		</script>
	
	</body>
</html>
